<?php
$p = \Yii::$app->controller->module->templateAsset."/huanduguoqing/";
?>
</script>
<style type="text/css">
	
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: white;
}

#container
{
    width: 500px;
    height: 815px;
    /*position: absolute;*/
    overflow: hidden;
}
#container > div, #container > img
{
    position: absolute;
}
.moon
{
    left: 0px;
    top: 0px;
}
#hua1
{
    left: 130px;
}
.hua21
{
    position: absolute;
    left: 25px;
    top: 54px;
    -webkit-transform-origin: 100% 100%;
    -webkit-animation: hua21 2s linear infinite alternate;
}
.hua22
{
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: skew(0deg);
    -webkit-animation: hua22 2s linear infinite alternate;
}
@-webkit-keyframes hua22
{
    from  {-webkit-transform: skew(-1deg);}
    to    {-webkit-transform: skew(2deg);}
}
@-webkit-keyframes hua21
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(-5deg);}
}
#hua2
{
    width: 500px;
    height: 300px;
    left: 120px;
    top: 561px;
    -webkit-transform: scale(0.8);
}
#titleimg
{
    left: 39px;
    top: 141px;
    opacity: 0;
}
#pagetitle
{
    position: absolute;
    width: 293px;
    background-color: rgba(255,255,255,0.4);
    height: 200px;
    top: -220px;
    -webkit-transform-origin: 50% 0%;
}
.title1
{
    position: absolute;
    left: 0px;
    top: 200px;
}
#titlediv
{
    position: absolute;
    top: 330px;
    width: 293px;
    left: 120px;
    height: 500px;
    overflow: hidden;  
}
.div
{
    top: 80px;
    width: 380px;
    left: 60px;
    height: 600px;
    background-color: #ccc;
    border:  5px solid #fff;
    box-shadow: 1px 2px 3px rgba(95, 93, 93, 0.6);
}
#div1,#div2
{
    -webkit-transform: translate(0px,-800px);
}
#div3,#div4
{
    opacity: 0;
}
#hua3
{
    -webkit-transform-origin: 110% 100%;
    left: 224px;
    top: 510px;
    -webkit-transform: rotate(64deg);
}
.dian1
{
    left: 0px;
    top: 0px;
    -webkit-animation: dian1 4s linear infinite;
}
@-webkit-keyframes dian1
{
    0%    {opacity: 0}
    34%   {opacity: 1}
    68%   {opacity: 0}
    100%  {opacity: 0}
}
.dian2
{
    left: -175px;
    top: 0px;
    -webkit-animation: dian2 5s linear infinite;
}
@-webkit-keyframes dian2
{
    0%   {opacity: 0}
    40%  {opacity: 0}
    70%  {opacity: 1}
    100% {opacity: 0}
}
.bg
{
    -webkit-animation: bgfade 10s linear infinite alternate;
}
@-webkit-keyframes bgfade
{
    from  {opacity: 1}
    to    {opacity: 0}
}
.yan1
{
    left: 0px;
    top: 0px;
    -webkit-animation: yan1 20s linear infinite;
}
.yan2
{
    opacity: 0;
    -webkit-animation: yan1 25s 5s linear infinite;
}
@-webkit-keyframes yan1
{
    0%    {-webkit-transform: translate(100px,0px);opacity: 0}
    10%    {-webkit-transform: translate(30px,0px);opacity: 1}
    /*0%    {-webkit-transform: translate(100px,0px);opacity: 0}*/
    90%    {-webkit-transform: translate(-530px,0px);opacity: 1}
    100%  {-webkit-transform: translate(-600px,0px);opacity: 0}
}
.wordspan
{
    width: 94%;
    left: 3%;
    position: absolute;
    color: #fff;
    font-size: 25px;
    text-align: center;
    bottom: 7px;
    text-shadow: 1px 1px 2px #000;
}
@-webkit-keyframes title_in
{
    0%   {-webkit-transform: scale(0.3);opacity: 0}
    50%  {-webkit-transform: scale(1.1);opacity: 1}
    70%  {-webkit-transform: scale(0.95);opacity: 1}
    90%  {-webkit-transform: scale(1.03);opacity: 1}
    100% {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes title_down
{
    0%   {-webkit-transform: translate(0px,0px) scale(1,1);}
    80%  {-webkit-transform: translate(0px,220px) scale(1,1.05);}
    100% {-webkit-transform: translate(0px,220px) scale(1,1);}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes title_out
{
    from  {-webkit-transform: translate(0px,0px) scale(1);opacity: 1}
    to    {-webkit-transform: translate(0px,600px) scale(0.8);opacity: 1}
}
@-webkit-keyframes title1
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,250px);}
}
@-webkit-keyframes title2
{
    from  {-webkit-transform: translate(0px,220px) scale(1,1);}
    to    {-webkit-transform: translate(0px,-30px) scale(1,1);}
}

@-webkit-keyframes div1_hua1
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,600px);}
}
@-webkit-keyframes div1_hua2
{
    from  {-webkit-transform: translate(0px,0px) scale(0.8);}
    to    {-webkit-transform: translate(0px,300px) scale(0.8);}
}
@-webkit-keyframes div1_in
{
    from  {-webkit-transform: translate(0px,-800px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div1_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,800px);}
}
@-webkit-keyframes div2_hua1
{
    from  {-webkit-transform: translate(0px,600px);}
    to    {-webkit-transform: translate(0px,900px);}
}
@-webkit-keyframes div2_hua2
{
    from  {-webkit-transform: translate(30px,-800px) scale(0.7);}
    to    {-webkit-transform: translate(30px,-608px) scale(0.7);}
}
@-webkit-keyframes div3_hua2
{
    from  {-webkit-transform: translate(30px, -608px) scale(0.7);}
    to    {-webkit-transform: translate(30px, 0px) scale(0.7);}
}
@-webkit-keyframes div4_hua2
{
    from  {-webkit-transform: translate(30px,0px) scale(0.7);opacity: 1}
    to    {-webkit-transform: translate(-150px,150px) scale(0.7);opacity: 0}
}
@-webkit-keyframes div2_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,600px);opacity: 0}
}
@-webkit-keyframes div3_in
{
    from  {-webkit-transform: translate(-544px,108px) rotate(-15deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div3_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(529px,-27px) rotate(-10deg);opacity: 0}
}
@-webkit-keyframes div4_hua3
{
    from  {-webkit-transform: rotate(64deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes div5_hua3
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(-30deg);opacity: 0}
}
@-webkit-keyframes div4_in
{
    from  {-webkit-transform: translate(-500px,-50px) rotate(10deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes div4_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(500px,50px) rotate(10deg);opacity: 0}
}
@-webkit-keyframes div5_hua1
{
    from  {-webkit-transform: translate(0px,800px);opacity: 0}
    to    {-webkit-transform: translate(0px,600px);opacity: 1}
}
</style>

<div id="container">
    <img src="<?=$p?>images/bg1.jpg">
    <img class="bg" src="<?=$p?>images/bg.jpg">

    <img class="dian1" src="<?=$p?>images/dian.png">
    <img class="dian2" src="<?=$p?>images/dian.png">

    <img class="yan1" src="<?=$p?>images/yun.png">
    <img class="yan2" src="<?=$p?>images/yun.png">

    <img class="moon" src="<?=$p?>images/moon.png">

    <div id="div1" class="div" >
        <div id="word1" class="wordspan"></div>
    </div>

    <div id="div3" class="div" >
        <div id="word3" class="wordspan"></div>
    </div>


    <img id="hua1" src="<?=$p?>images/hua.png" >



    <div id="hua2" >
        <img class="hua21" src="<?=$p?>images/hehua.png">
        <img class="hua22" src="<?=$p?>images/lianhua.png">
    </div>

    <div id="div2" class="div" >
        <div id="word2" class="wordspan"></div>
    </div>
    <div id="div4" class="div" >
        <div id="word4" class="wordspan"></div>
    </div>

    <img id="hua3" src="<?=$p?>images/flower2.png">

    <div id="titlediv" >
        <div id="pagetitle" >
            <img class="title1" src="<?=$p?>images/title1.png">
            <div style="position:absolute;width:273px;height:171px;top:18px;left:9px;overflow:hidden;display:table">
                <div id="titlecontent" style="width: 288px; height: 171px; vertical-align: middle; display: table-cell; text-align: center; font-size: 26px; line-height: 37px; color: rgb(255, 255, 255);" ></div>
            </div>
        </div>
    </div>
    <img id="titleimg" src="<?=$p?>images/title.png">



</div>

<script>

function id(name)
{
    return document.getElementById(name)
}
//ÿ��ִ�м��غ�5��ͼƬ
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //��������X��
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    step_load();       
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=6000;
var timeout = [];

function showtitle()
{

    id('titleimg').style.webkitAnimation = 'title_in 1s ease-out both';
    id('pagetitle').style.webkitAnimation = 'title_down 0.8s 1s linear both';
    id('titlecontent').innerHTML = desc;
    id('titlecontent').style.webkitAnimation = 'fadein 0.6s 1.8s linear both';


    // setTimeout(distitle,5000)
}

function liangziyun_kawa()
{
    id('titleimg').style.webkitAnimation = 'title_out 3s 1s linear both';
    id('titlediv').style.webkitAnimation = 'title1 1.3s 1s linear both';
    id('pagetitle').style.webkitAnimation = 'title2 1.3s 1s linear both';
    id('titlecontent').style.webkitAnimation = 'fadeout 1s linear both';

    timeout[1] = setTimeout(show1, 2000)
}

function show1()
{
    setImage('1');

    id('hua1').style.webkitAnimation = 'div1_hua1 2s cubic-bezier(.52,.63,.79,.99) both';
    id('hua2').style.webkitAnimation = 'div1_hua2 2s ease-out both';

    id('div1').style.webkitAnimation = 'div1_in 2s ease-out both';


    timeout[2] = setTimeout(show2,5500)
}

function show2()
{
    setImage('2');

    id('div1').style.webkitAnimation = 'div1_out 1.5s ease-in both';

    id('hua1').style.webkitAnimation = 'div2_hua1 2s ease-in both';
    id('hua2').style.webkitAnimation = 'div2_hua2 2s ease-out both';

    id('div2').style.webkitAnimation = 'div1_in 1.5s 0.5s ease-out both';

    timeout[3] = setTimeout(show3,5500)
}

function show3()
{
    setImage('3');

    id('hua2').style.webkitAnimation = 'div3_hua2 2s cubic-bezier(.52,.63,.79,.99) both';
    id('div2').style.webkitAnimation = 'div2_out 2s cubic-bezier(.52,.63,.79,.99) both';

    id('div3').style.webkitAnimation = 'div3_in 2s 0.5s cubic-bezier(.52,.63,.79,.99) both';

    timeout[4] = setTimeout(show4,5500)
}

function show4()
{
    setImage('4');

    id('div3').style.webkitAnimation = 'div3_out 1.5s ease-in both';
    id('hua2').style.webkitAnimation = 'div4_hua2 2s ease-in both';

    id('hua3').style.webkitAnimation = 'div4_hua3 2s cubic-bezier(.52,.63,.79,.99) both';
    id('div4').style.webkitAnimation = 'div4_in 2s ease-out both';
    
    timeout[5] = setTimeout(show5,5500)
}

function show5()
{
    setImage('1');

    id('div4').style.webkitAnimation = 'div4_out 2s ease-in both';
    id('hua3').style.webkitAnimation = 'div5_hua3 2s ease-in both';

    id('div1').style.webkitAnimation = 'div1_in 2s ease-out both';
    id('hua1').style.webkitAnimation = 'div5_hua1 2s ease-out both';

    timeout[6] = setTimeout(show2,5500);
}
var get_pid = function(url)
{
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function setImage(idname)
{

    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div = id('div'+idname);

    div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';

    var word = id('word' + idname);
    var str = words[get_pid(Onload_imgs_url[image_url_index])];
    if(str != undefined)
    {
        word.innerHTML = str;
    }
    else
    {
        word.innerHTML = '';
    }
    //500 760
    if(img_bili < (380/600))
    {
        var height = 600;
        var width = 600 * img_bili;
        var top = 60;
        var left = (500-width)/2;
    }
    else if(img_bili <= 1)
    {
        var width = 380;
        var height = 380 / img_bili;
        var left = 60;
        var top = (720-height)/2
    }
    else if(img_bili > 1)
    {
        var width = 440;
        var height = 440/img_bili;
        var left = 30;
        var top = (760-height)/2;
    } 

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.left = left + 'px';
    div.style.top = top + 'px';
    div.style.backgroundSize = (width-7) + 'px ' + (height-7) + 'px';


    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}

call_me(load_images)


function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i]);
    }

    var itemlist = ['titleimg','pagetitle','titlecontent','div1','div2','div3','div4','hua1','hua2','hua3','titlediv'];

    for(var i =0; i<itemlist.length;i++)
    {
        id(itemlist[i]).style.webkitAnimation = '';
    }

}

</script>